<template>
  <div class="userDetail" v-if="userInfo">
    <div class="box">
      <div class="top">基本资料</div>
      <div class="index">
        <div class="content">
          <div class="title">性别</div>
          <div class="text" v-if="userInfo.sex == 1">男</div>
          <div class="text" v-else-if="userInfo.sex == 2">女</div>
          <div class="text" v-else>未知</div>
        </div>
        <div class="content">
          <div class="title">年龄</div>
          <div class="text">未知</div>
        </div>
        <div class="content">
          <div class="title">所在地区</div>
          <div class="text">
            {{ userInfo.location ? userInfo.location.province.name : "地球" }}
          </div>
        </div>
        <div class="content">
          <div class="title">简介</div>
          <div class="text">
            {{ userInfo.about ? userInfo.about : "未填写" }}
          </div>
        </div>
        <div class="content">
          <div class="title">IP归属地</div>
          <div class="text">{{ userInfo.ip_location }}</div>
        </div>
      </div>
    </div>
    <div
      class="box"
      v-if="
        userInfo.occupation &&
        userInfo.entry_year &&
        userInfo.verify_description
      "
    >
      <div class="top">认证信息</div>
      <div class="index">
        <div class="content">
          <div class="title">认证信息</div>
          <div class="text">{{ userInfo.occupation }}</div>
        </div>
        <div class="content">
          <div class="title">入行年份</div>
          <div class="text">{{ userInfo.entry_year }}</div>
        </div>
        <div class="content">
          <div class="title">认证描述</div>
          <div class="text">{{ userInfo.verify_description }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: ["userInfo"],
};
</script>

<style lang="scss" scoped>
.userDetail {
  padding: 0 15px;
  min-height: 567px;

  .box {
    .top {
      font-size: 16px;
      font-weight: bold;
      border-bottom: 1px solid #f2f2f2;
      padding: 15px 0;
    }

    .index {
      .content {
        display: flex;
        font-size: 14px;
        margin-top: 15px;

        .title {
          color: #999;
          width: 85px;
          flex-shrink: 0;
        }

        .text {
          white-space: pre-wrap;
        }
      }
    }
  }

  .box:nth-of-type(2) {
    margin-top: 15px;
  }
}
</style>
